<template>
  <div>
    <el-card>
      <el-input
        style="width: 400px"
        placeholder="请输入内容"
        v-model="value"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%" class="Top">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="order_number" label="订单号" width="180">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column prop="order_pay" label="是否付款">
          <template slot-scope="scope">
            <el-tag effect="dark" v-if="scope.row.order_pay == 0" type="danger"
              >未付款
            </el-tag>
            <el-tag effect="dark" v-if="scope.row.order_pay == 1" type="success"
              >已付款
            </el-tag>
            <el-tag effect="dark" v-if="scope.row.order_pay == 2" type="warning"
              >付款中
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.create_time | time }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              type="primary"
              @click="OpenEdit(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-location-information"
              @click="Del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 对话框 -->

      <el-dialog title="修改地址" :visible.sync="dialogVisible" width="50%">
        <el-form>
          <el-form-item label="省市区/县" label-width="100px">
            <el-cascader
              size="large"
              :options="options"
              v-model="provinces"
              @change="handleChange"
              placeholder="请选择省市区"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" label-width="97px">
            <el-input v-model="Val"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog title="物流信息" :visible.sync="dialogFormVisible">
        <div slot="footer" class="dialog-footer">
          <el-steps
            direction="vertical"
            :space="90"
            icon="el-icon-location-information"
          >
            <el-step
              :title="item.context"
              v-for="(item, index) in context"
              :key="index"
            ></el-step>
          </el-steps>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>

      <el-pagination
        class="Top"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data' //引入
export default {
  components: {},
  data() {
    return {
      value: '',
      context: [],
      Val: '',
      tableData: [],
      options: regionData, //选择格式
      provinces: [], //省市区绑定数组
      dialogVisible: false,
      dialogFormVisible: false,
      form: {
        pagesize: 5,
        pagenum: 1
      },
      total: 0
    }
  },
  created() {
    this.getlist()
  },
  mounted() {},
  methods: {
    OpenEdit() {
      this.dialogVisible = true
    },
    Del() {
      this.dialogFormVisible = true
    },
    handleChange(e) {
      console.log(e, '所选code值')
    },
    async getlist() {
      const res = await this.$http.Order(this.form)
      const res1 = await this.$http.Dan(1106975712662)
      console.log(res)
      console.log(res1)
      this.tableData = res.goods
      this.total = res.total
      this.context = res1
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.form.pagesize = val
      this.getlist()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.form.pagenum = val
      this.getlist()
    }
  }
}
</script>
<style scoped lang='scss'>
.Top {
  margin-top: 20px;
}
</style>
